<template>
    <div class="form-group">
        <label :class="labelClass" :style="finalLabelStype"><span v-if="required" class="required ">*</span>{{ title }}：</label>
        <div :class="rightClass" :style="rightStyle">
            <form-pop :content="error" />
            <a-select style="width:100%;" class="select-down" :style="selectStyle" show-search :value="value != null ? {key:value,label:valueTitle} : {key:'',label:valueTitle}" @change="handleChange" :id="id" :name="name" :mode="mode" :size="size" label-in-value @search="handleSearch" :filter-option="filterOption" :default-active-first-option="defaultActiveFirstOption" :show-search="showSearch" option-label-prop="label" :disabled="disabled">
                <a-select-option :label="item.title" v-for="(item, index) in data" :key="item.key + index" :value="item.key" :title="item.title">
                    <slot name="option" :item="item">{{ item.title }} </slot>
                </a-select-option>
            </a-select>
            <slot name="actions" class="action"></slot>
        </div>
    </div>
</template>

<script>
import formAttr from "@/mixins/form/form-attr";

const defaultLabelStype =
    "font-weight: normal;justify-content: flex-end;padding-left: 5px;text-align: right;width:110px;margin-top:-10px;";
export default {
    name: "FormSelect",
    mixins: [formAttr],
    props: {
        selectStyle: {
            type: String,
            default: ""
        },
        dataList: {
            type: Array,
            default: () => []
        },
        mode: {
            type: String,
            default: "default"
        },
        addDefaultText: {
            type: String,
            default: ""
        },
        showSearch: {
            type: Boolean,
            default: false
        },
        handleSearch: {
            type: Function,
            default: () => { }
        },
        filterOption: {
            type: Boolean,
            default: true
        },
        iconShow: {
            type: Boolean,
            default: false
        },
        iconClick: {
            type: Function,
            default: () => { }
        },
        iconClass: {
            type: String,
            default: ""
        },
        //返回的title
        valueTitle: {
            type: String,
            default: ""
        },
        defaultActiveFirstOption: {
            type: Boolean,
            default: false
        }

    },
    data () {
        return {
        };
    },
    created () {
        console.log("FormSelect_size", this.size)
    },
    mounted () {
    },
    computed: {
        finalLabelStype: function () {
            return this.labelStyle || defaultLabelStype;
        },
        data: function () {
            if (this.addDefaultText) {
                return [{ key: "", title: this.addDefaultText }, ...this.dataList]
            } else {
                return this.dataList;
            }
        },
    },
    methods: {

        handleChange (value) {
            this.$emit("input", value.key);
            //自定义 change事件
            this.$emit("change", value.key);
            this.$emit("update:valueTitle", value.label)
            //todo
            console.log(`selected `, value);
        },
    }
};
</script>
<style lang="less" scoped>
    .required {
        margin-right: 4px;
        color: #f5222d;
        line-height: 1rem;
    }
</style>
<style lang="less">
    // .select-down {
    //     .ant-select-selection--single {
    //         height: 28px !important;
    //     }
    // }
</style>